<template>
    <div class="about">
        <div class="left">
            <leftOne :title="'行业资产分布'"></leftOne>
            <leftTwo :title="'投资机构分布'"></leftTwo>
        </div>
        <div class="center">
            <div class="home-center">

            </div>
        </div>
        <div class="right">
            <rightOne :title="'投资规模趋势'" :scaleX="-1"></rightOne>
            <rightTwo :title="'投资项目进展'" :scaleX="-1"></rightTwo>
        </div>
    </div>
</template>

<script setup lang="ts">
// 使用 script setup 语法
// import Helloworld from "@/components/HelloWorld.vue";
import rightTwo from '@/components/homeCom/rightTwo.vue';
import leftTwo from '@/components/homeCom/leftTwo.vue';
import leftOne from '@/components/homeCom/leftOne.vue';
import rightOne from '@/components/homeCom/rightOne.vue';
</script>
<style scoped lang="less">
.about {
    width: 100%;
    height: 100%;
    display: flex;
    // flex-direction: column;

    .center {
        flex: 1;
        background-size: 100% 80%;
        position: relative;
    }

    .left,
    .right {
        height: 100%;
        width: 28%;
        display: flex;
        flex-direction: column;

        .left>div,
        .right>div {
            flex: 1;
        }
    }
}
</style>